昨天我們看完了甚麼是JSX後，今天是時候動動手來試試看各種有關JSX的功能了吧。
我們一樣用的是freecodecamp作為我們練習的工具，因為這樣可以挑選想要學習或練習的項目來挑戰!

創建一個複雜的 JSX 元素
有關嵌套JSX的幾件事情我們必須要先知道，那就是他必須返回單一個element，父元素必須包裝所有其他等級的元素
如果沒有用父元素包裝起來的話就不會被轉譯成功
例:
這是一個有效包裝的例子

<div>
  <p>Paragraph One</p>
  <p>Paragraph Two</p>
  <p>Paragraph Three</p>
</div>

而這是無效的

<p>Paragraph One</p>
<p>Paragraph Two</p>
<p>Paragraph Three</p>

下面做一個完整的範例

const JSX = <div>
  <h1>Heading.</h1>
  <p>Paragraph</p>
 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</div>; 

這個範例定義一個新的JSX，它會按順序呈現div包含以下元素的 a：
一個h1、一個p和一個包含三個li項目的無序列表。
像在做這種多個元素的情況的時後，我們可以把他們全部放在括號裡面，但是這並不是強制要求的，當然你也可以選擇不將他們放一起，另外，如果刪除div，JSX 就不會再編譯，這點很重要，因為它也適用於在 React 組件中return JSX 元素時。

在 JSX 中添加註釋
當我們撰寫程式的時候，常常會去參考別人的範例，但是經常會出現看不懂的情況，這時候註解的功能就顯得非常重要了，因為添加註解可以幫助你理解這行程式碼的作用，而每一種語言的註解方式都不盡相同，而JSX利用的就是{/* */}
來框住需要註解的部分。
就像這樣

const JSX = (
  <div>
    <h1>This is a block of JSX</h1>
    <p>Here's a subtitle</p>
    {/* hi */}
  </div>
);

其中的 {/* hi */} 就是註解。

在 JSX 中定義一個 HTML 類
到目前為止，HTML 和 JSX 看起來幾乎完全一樣，JSX 的其中一個關鍵區別是不能使用這個詞class來定義 HTML 。這是因為class它是 JavaScript 中的保留字。JSX 使用className來代替，這被稱作駝峰命名法，因為中間的字母用大寫而不是小寫，例如，JSX 中的單擊事件是onClick，而不是onclick，雖然這個區別可能很不容易被注意到，但他也很重要。
所以，我們現在要來創建一個className

const JSX = (
  <div className='myDiv'>
    <h1>Add a class </h1>
  </div>
);

這裡將我們的className命名為myDiv

那今天的介紹就先告一段落了，明天再繼續吧!

參考連結:
https://www.freecodecamp.org/learn/